:root:root {
  /* 导航栏*/
  --main-color: #c82030;
  --sub-one-color: #333333;
  --sub-two-color: #797979;
  --sub-line-color: #ebedf0;
  --disable-color: #c8c9cc;
  --van-nav-bar-background: #c82030;
  --van-nav-bar-icon-color: #c82030;
  --van-nav-bar-text-color: #fff;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-arrow-color: #fff;

  --van-button-default-background: #c82030;
  --van-button-primary-background: var(--main-color);
  --van-button-primary-border-color: var(--main-color);
  --van-picker-confirm-action-color: var(--main-color);

  --van-dialog-confirm-button-text-color: #fff;

  --van-padding-md: 0px;

  --van-cell-icon-size: 20px;

  --van-sidebar-text-color: var(--van-text-color);
  --van-sidebar-selected-border-color: var(--main-color);
  --van-sidebar-selected-background: var(--main-color);
  --van-sidebar-selected-text-color: #fff;
  --van-sidebar-padding: 10px;
}

body,
html {
  background-color: #fff;
}
.mainContent {
  max-width: 1280px;
  margin: auto 0;
  padding: 12px;
  min-width: 320px;
}
a,
.green {
  text-decoration: none;
  color: var(--main-color);
  transition: 0.4s;
  padding: 3px;
}

/* 全局覆盖 */
.router-link-active {
  text-decoration: none;
  color: var(--main-color);
  transition: 0.4s;
  padding: 3px;
}
.router-link-active:hover {
  text-decoration: none;
  color: var(--main-color);
  transition: 0.4s;
  background-color: #fff;
}

.router-link-exact-active {
  text-decoration: none;
  color: var(--main-color);
  transition: 0.4s;
  padding: 3px;
}
.mainBgColorHover:hover {
  background-color: var(--main-color); /* 主题色 */
}
.mainBgColorHover:focus {
  background-color: var(--main-color); /* 主题色 */
}
.mainBgColorHover:active {
  background-color: var(--main-color); /* 主题色 */
}
.subOneColor {
  color: #333333; /* 辅助色1 */
}
.line {
  border: 1px solid #ebedf0;
}
.h1 {
  /*1级标题*/
  font-size: 18px;
  color: #333333;
}
.h2 {
  /*2级标题*/
  font-size: 16px;
  color: #333333;
}
.contentSbuSize {
  /*2级标题*/
  font-size: 12px;
  color: #333333;
}

.ryCard {
  border-radius: 5px;
  margin: 15px 12px 0px 12px;
  border: 0.5px solid #ebedf0;
}
.ryCardHeader {
  border: 0.5px solid #ebedf0;
  line-height: 200%;
  padding: 10px 0px;
}
.ryCardTitle {
  /*card 标头 内容*/
  padding-left: 12px;
  font-size: 16px;
  font-weight: 400;
  color: var(--main-color);
}
.ryCardHeaderOp {
  /*card 表头含操作栏目*/
  display: flex;
  justify-content: space-between;
  border: 0.5px solid #ebedf0;
  line-height: 200%;
  padding: 12px 0px;
}
.ryCardTitleOp {
  padding-left: 12px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
.ryCardTitleOpMore {
  font-size: 16px;
  color: var(--main-color);
  padding-right: 12px;
  cursor: pointer;
}

.cardContent {
  display: grid;
  grid-template-columns: 100px auto;
}
.cardContentImage {
  border-radius: 5px;
  max-width: 100px;
  padding: 5px 10px;
}
.cardContentImage img,
.cardActivityContentImage img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.cardContentRight {
  padding: 5px 10px;
  padding-top: 13px;
}
.cardActivityContent {
  display: block;
  width: 100%;
}
.cardActivityContentImage {
  border-radius: 5px;
  width: 100%;
  padding: 5px 10px;
}
.contentTile {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.contentTime,
.contentPrice {
  display: grid;
  grid-template-columns: 80px auto;
  color: #333;
}
.cardActivityContentDetailTitle {
  padding: 12px;
}
.cardActivityContentParam {
  border-top: 0.5px solid #f2f2f2;
  border-bottom: 0.5px solid #f2f2f2;
  padding: 20px 12px;
}
.cardActivityContentPre {
  padding: 12px;
  font-size: 14px;
}
.contentTime label {
  font-size: 14px;
}
.contentPrice label {
  font-size: 14px;
}
.contentPrice .price {
  font-size: 14px;
  color: var(--main-color);
}
.contentValue {
  font-size: 14px;
  color: #333;
}
.shareContent {
  border-radius: 5px;
  border: 0.5px solid #ebedf0;
  margin-bottom: 12px;
  margin-top: 12px;
}
.shareOp {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.shareOpImage {
  max-width: 60px;
  max-height: 60px;
  min-width: 20px;
  min-height: 20px;
  margin: 5px;
  margin-top: 30px;
  text-align: right;
  margin-left: 12px;
}
.shareOpImage img {
  width: 100;
  height: 100%;
  text-align: right;
  margin-left: 12px;
  margin-right: 12px;
}
shareOpImage img::after {
  margin-right: 0px;
}
.shareOpText {
  flex: 4;
  font-size: 14px;
  color: #333;
  margin: 5px;
  margin-top: 30px;
}
.shareOpTip {
  width: 100%;
  text-align: center;
  font-size: 14px;
  padding: 12px;
}
/* 新闻页面样式 */
.newsRichContent {
  width: 100%;
  text-align: left;
  padding: 5px 12px;
}
.newsRichContent img {
  width: 100%;
  max-width: 560px;
}
.newNum {
  color: var(--main-color);
  font-size: 16px;
  font-weight: 600;
}
.buyChery {
  text-align: center;
  font-size: 22px;
  color: var(--main-color);
  font-weight: 600;
  line-height: 300%;
}
.newsFooter {
  text-align: center;
  width: 100%;
}
.newsFooter a {
  font-weight: 600;
}
.copyright {
  display: block;
  color: #797979;
  line-height: 200%;
  font-size: 14px;
}

/* 新闻页面样式结束 */
/*交车照片*/
.loveHandCarContent {
  padding: 12px;
}

.imgContain {
  margin-top: 12px;
  column-count: 2; /* 设置列数 */
  column-gap: 10px; /* 设置列间距 */
}
.imgContainItem {
  break-inside: avoid; /* 防止内容断裂 */
  margin-bottom: 10px; /* 设置项之间的间距 */
}
.imageContainItemInner {
  border: 0.5px solid #ebedf0;
  border-radius: 5px;
}
.imgContainItem img {
  width: 100%; /* 设置图片宽度 */
  padding: 12px;
  border-radius: 12px;
}
.imageContainItemHeader {
  padding: 5px 12px 12px 12px;
}
.imgContainItem .carMasterTitle {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.imgContainItem .carMasterHanderTime {
  font-size: 14px;
  color: #333;
}
.newDes {
  font-size: 12px;
  color: var(--sub-one-color);
}
.velGroupCell {
  border: 1px solid #d7d7d7;
  padding: 12px;
}
.myPointDes {
  border: 1px solid #ebedf0;
  padding: 12px;
  border-radius: 12px;
  margin: 12px;
}
.myPointDes .roleRule {
  color: var(--main-color);
  text-align: right;
  cursor: pointer;
}
.myPointDes h2 {
  font-weight: 600;
  font-size: 18px;
}
.myPointDes span {
  color: var(--main-color);
  padding: 1px 12px;
  font-weight: 600;
}
.myPointItem,
.myCouponItem {
  padding: 12px 1px;
  margin-bottom: 12px;
  margin-left: 12px;
  margin-right: 12px;
  border-bottom: 1px solid #ebedf0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rewardContentItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.myPointItem .leftText,
.rewardContentItem .leftText {
  flex: 4;
}
.myPointItem .leftText h2,
.myCouponItem .cneterText h2,
.rewardContentItem .leftText h2 {
  font-size: 16px;
  font-weight: 600px;
}
.myPointItem .rightNum,
.rewardContentItem .rightNum {
  flex: 1;
  text-align: right;
  padding: 12px;
  font-weight: 600;
  font-size: 18px;
  color: var(--main-color);
}
.myCouponItem .leftText {
  flex: 1;
  text-align: left;
  padding: 12px;
}
.myCouponItem .leftText .couponPrice {
  color: var(--main-color);
  font-size: 18px;
  font-weight: 600;
}
.myCouponItem .leftText .couponType {
  font-size: 14px;
}

.myCouponItem .cneterText {
  flex: 2;
}
.myCouponItem .cneterText h2 {
  font-size: 18px;
  font-weight: 600;
}
.myCouponItem .rightText,
.memberCardHeader .rightText {
  flex: 1;
}
.myCouponItem .rightText .button,
.memberCardHeader .rightText .button {
  text-align: center;
  padding: 5px 5px;
  border-radius: 5px;
  width: 80px;
  font-size: 14px;
  float: right;
}
.myCouponItem .rightText .useButton,
.memberCardHeader .rightText .useButton {
  background-color: var(--main-color);
  color: #fff;
}
.myCouponItem .rightText .usedButton,
.memberCardHeader .rightText .usedButton {
  background-color: var(--sub-line-color);
  color: var(--sub-one-color);
}
.myCouponItem .rightText .overTimeButton,
.memberCardHeader .rightText .overTimeButton {
  background-color: var(--sub-line-color);
  color: var(--sub-two-color);
}
.memberCarEmptyContent {
  margin: auto 0px;
  display: block;
  text-align: center;
  padding: 12px 40px;
}
.memberCarEmptyContent .friendTip {
  font-size: 16px;
  color: var(--main-color);
  font-weight: 600;
}
.memberCarEmptyContent .minaImageContent {
  display: block;
  margin-top: 12px;
}
.memberCarContent,
.recommendCustomerContent {
  margin: 12px;
  border: 1px solid var(--sub-line-color);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 20px;
}
.memberCardHeader {
  display: flex;
  justify-content: center;
  justify-items: auto;
  border-bottom: 1px solid var(--sub-line-color);
}
.recommendCustomerHeadr {
  border-bottom: 1px solid var(--sub-line-color);
}
.memberCardTitle {
  flex: 4;
  font-size: 18px;
  font-weight: 600;
  color: var(--main-color);
  line-height: 40px;
}
.recommendCustomerTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--main-color);
  line-height: 30px;
}
.memberCardUsedContent {
  margin-top: 12px;
}
.memberCardUsedItem {
  padding: 5px 12px;
  border-radius: 12px;
  border: 1px solid var(--sub-line-color);
  margin-bottom: 12px;
}

@keyframes fadeInOut {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate-fade {
  animation: fadeInOut 1s forwards; /* forwards 保持动画结束时的状态 */
}
.memberCardNum {
  color: red;
  font-size: 16px;
}
.memberCardNum .van-cell__value {
  font-size: 16px;
  color: red;
}
.hrdashed {
  border-style: dashed;
  border-color: var(--sub-line-color);
  margin: 12px 0px;
}
.myOnlineCell {
  display: flex;
  text-align: left;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
}
.myOnlineCell .title {
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
}
.myOnlineCell .rightContent {
  color: var(--main-color);
  display: flex;
  justify-content: end;
}
.myOnlineCell .rightContent a {
  color: var(--main-color);
}
.myOnlineCell .rightContent img {
  width: 30px;
  height: 30px;
  margin-top: 5px;
}
.myRewardHeader {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}
.rewardItemItem {
  padding: 12px 1px;
  margin-bottom: 12px;
  margin-left: 12px;
  margin-right: 12px;
  border-bottom: 1px solid #ebedf0;
}
.rewardDes {
  color: var(--sub-two-color);
  font-size: 12px;
}
.recommendCustomerInnerItem {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
}
.recommendCustomerInnerItemImg {
  flex: 2;
}
.recommendCustomerInnerItemImg img {
  padding: 5px;
}
.recommendCustomerInnerItemContent {
  flex: 10;
  padding-left: 12px;
}
.recommendCustomerOper {
  display: flex;
  justify-content: space-between;
}
.recommendCustomerOper .oprRight {
  padding-right: 12px;
}
.recommendCustomerOper .oprRight .buttEdit {
  background-color: var(--main-color);
  color: #fff;
  border: 1px solid var(--main-color);
  width: 120px;
}
.recommendCustomerOper .oprLeft {
  padding-left: 12px;
}
.recommendCustomerOper .oprLeft .buttCancel {
  background-color: var(--sub-two-color);
  color: #fff;
  border: 1px solid var(--sub-two-color);
  width: 120px;
}
.title-class {
  flex: 1;
}
.value-class {
  flex: 2;
}
.myChildreenTagContent {
  display: flex;
  justify-content: center;
}
.myChildreenTagContentItem {
  width: 80px;
  cursor: pointer;
}
.myChildreenOp {
}
.myChildreenOp .opbutton {
  background-color: var(--main-color);
  color: #fff;
  border: 1px solid var(--main-color);
  width: 100%;
}
.memberAuthRight {
  display: flex;
  flex: 1;
  text-align: right;
  justify-content: right;
  align-items: center;
}
.contentItemValue {
  --van-cell-line-height: 18px;
  --van-cell-label-font-size: 12px;
  --van-cell-vertical-padding: 6px;
  --van-cell-value-font-size: 12px;
}
.carMasterSelectButtonContainer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 12px;
  z-index: 999;
  height: 50px;
  background-color: #fff;
}
.itemshodow {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.memberInfoPopTitle {
  text-align: center;
  line-height: 40px;
  height: 40px;
}
.memberInfoPopContainer {
  text-align: center;
  margin: auto 12px;
  padding: 12px;
  border-top: 1px solid var(--sub-line-color);
  margin-top: 20px;
}
.memberInfoPopButton {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.disable {
  /*不可操作*/
  border-color: #eee;
  background-color: #fbfbfb;
  color: #d2d2d2;
  cursor: not-allowed;
  text-align: center;
}
.enable {
  /*可以预约*/
  color: var(--main-color);
  cursor: pointer;
  text-align: center;
}
.bookingcreate {
  cursor: not-allowed;
  cursor: pointer;
  font-weight: normal;
  text-align: center;
  color: var(--sub-one-color);
}
.bookinged {
  color: #fff;
  text-align: center;
}
.bookingSelected {
  color: #fff;
  text-align: center;
}
